<template>
    <div class="title">
        租赁信息
        <span class="navigation-to-local" v-if="props.isNavigation" @click="navigationToLocal">到这里去</span>
        <span class="close" @click="closeHandler">X</span>
    </div>
    <div class="park">
        <ul class="attr-box">
            <li> 名称:{{props.name}}</li>
            <li> 地址:{{props.address}}</li>
        </ul>
        <ul class="infow-box">
            <li class="row" v-for="row in datalists">
                <div class="cont-box" v-for="item in row">
                    <div class="num">
                        <span class="icon" :style="{backgroundColor:item.bgc}"></span>
                        <span :style="{color:item.bgc}">{{item.num}}</span>
                    </div>
                    <div class="_title">{{item.title}}</div>
                </div>
            </li>
        </ul>
        <div class="des">
            <span>收费标准:</span>{{des}}
        </div>
    </div>
</template>

<script setup>
    import {defineProps, reactive} from 'vue'
    import {GlobalVariables} from "../../GlobalVariables";

    const props = defineProps(["callBack", "isNavigation", "address", "adcode", "address", "adname", "citycode", "cityname", "id", "location", "name", "pcode", "pname", "type", "typecode"])
    const count = parseInt(Math.random() * 50) + 50;
    const free = parseInt(count * Math.random() * 0.3);
    const free_1 = parseInt(count * Math.random() * 0.3) - free;
    const evaluate = (Math.random() + 4).toFixed(2);
    const dess = [
        "租赁时间<0.5小时,免费;0.5小时<租赁时间≤1小时，2元;租赁时间>2小时，每小时加1元（不足1小时按1小时计）",
        "1小时内免费；租用1小时以上，每小时收费1元；租用12小时以上,24小时以内收费封顶12元。超过24小时的，每天收费封顶18元。",
        "0.5小时内免费,第1小时收费1元(不足1小时按1小时收),第3小时及以上每小时收费3元(不足1小时按1小时收)"
    ]
    const des = dess[parseInt(Math.random() * dess.length)]
    const datalists = reactive([
        [
            {
                title: "总车位",
                bgc: "#ff4ff9",
                num: count,
            },
            {
                title: "空闲车位",
                bgc: "#80c5ff",
                num: free,
            }
        ],
        [
            {
                title: "同比上日",
                bgc: "#ff3e41",
                num: free_1,
            },
            {
                title: "评分",
                bgc: "#ff3e41",
                num: evaluate,
            }
        ]
    ])

    function navigationToLocal() {
        if (props.callBack) {
            props.callBack(props);
        }
    }

    function closeHandler() {
        GlobalVariables.map.clearInfoWindow();
    }
</script>

<style scoped lang="less">
    .title {
        position: relative;
        top: 0;
        left: 0;
        font-size: 0.2rem;
        padding: 0.1rem 0 0.1rem 0.2rem;
        background-color: #1f2e2f;
        .navigation-to-local{
            border-radius: 0.05rem;
            font-size: 0.16rem;
            padding: 0.03rem 0.1rem;
            position: absolute;
            top: 0.1rem;
            right: 0.4rem;
            cursor: pointer;
            background-color: #d1d333;
            color: #000;
        }
        .close {
            position: absolute;
            top: 0.1rem;
            right: 0.1rem;
            cursor: pointer;
            &:hover {
                color: #ff0981;
            }
        }
    }
    .park {
        width: 3rem;
        background-color: #304a4f;
        padding: 0.1rem 0.2rem;
        .attr-box {
            font-size: 0.16rem;
            padding-left: 0.2rem;
            li {
                padding: 0.03rem 0;
            }
        }
        .des {
            padding-left: 0.2rem;
            font-size: 0.14rem;
            span {
                font-size: 0.16rem;
            }
        }
        &::after {
            content: "";
            position: absolute;
            bottom: -0.25rem;
            left: calc(50% - 0.25rem);
            width: 0;
            height: 0;
            border-top: 0.25rem solid #1f2e2f;
            border-right: 0.1rem solid transparent;
            border-bottom: 0.1rem solid transparent;
            border-left: 0.1rem solid transparent;
        }
    }
</style>